<template>
    <div class="container">
        <h2>GPX Machine Event历史记录</h2>
        <div class="header">
            <el-form :inline="true" :model="searchParams" class="demo-form-inline">
                <el-form-item label="开始时间">
                    <el-date-picker v-model="searchParams.startTime" type="date" value-format="yyyy-MM-dd"
                        placeholder="选择保养日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker v-model="searchParams.endTime" type="date" value-format="yyyy-MM-dd"
                        placeholder="选择保养日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="线名/机器">
                    <el-cascader v-model="lineMachineValues" :options="options" @change="handleChange"
                        @visible-change="visibleChange" ref="cascader" size="medium">
                    </el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getEventlog">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-row class="content-wrapper ">
            <el-table :data="eventLogData" style="width: 100%" border :header-cell-style="headerStyleEvent">
                <!-- <el-table-column prop="id" label="id" width="100" align="center"></el-table-column> -->
                <el-table-column prop="dateTimeStr" label="时间" width="230" align="center">
                </el-table-column>
                <el-table-column prop="line" label="线体" width="180" align="center"></el-table-column>
                <el-table-column prop="machine" label="机器" width="180" align="center">
                </el-table-column>
                <el-table-column prop="state" label="状态" width="120" align="center"></el-table-column>
                <el-table-column prop="desc" label="描述" width align="center"></el-table-column>
            </el-table>
            <pagination :page.sync="searchParams.page" :limit.sync="searchParams.limit" :total="total"
                @pagination="getEventlog">
            </pagination>
        </el-row>
    </div>
</template>

<script>
import { getLineMachine, getGPXsingleEventlog } from '@/network/gpx';
import { Notification } from 'element-ui';
import Pagination from '@/components/Pagination.vue';

export default {
    components: {
        Pagination
    },
    data() {
        return {
            formdata: {},
            lineMachineValues: [],
            options: [],
            selected: {},
            total: 0,
            searchParams: {
                limit: 10,
                page: 1,
                startTime: '',
                endTime: '',
                lineName: '',
                machineName: ''
            },
            eventLogData: []
        };
    },
    mounted() {
        this.getLineMachineData();
        // this.getGPXsingleData();


    },
    methods: {
        headerStyleEvent() {
            if (this.$store.state.theme.useCustomTheme === "7-gpx") {
                return { background: '#f5f5f5', color: '#2F4F4F' };
            } else {
                return { background: '#eef1f6', color: '#606266' }
            }
        },
        async getLineMachineData() {
            try {
                Notification.closeAll();
                const result = await getLineMachine();
                if (result) {
                    if (result.status) {
                        if (result.status != 200) {
                            this.$notify.error({
                                title: '获取线体/机器出错',
                                message: result.message,
                                offset: document.documentElement.clientHeight * 1 / 3,
                                duration: 0
                            });
                            return;
                        }
                        this.options = this.formatLineMachineData(result.data);
                    }
                    else {
                        this.options = this.formatLineMachineData(result);
                    }
                }

            } catch (error) {
                console.log(error);
            }
        },
        async getEventlog() {
            try {
                const res = await getGPXsingleEventlog({
                    lineName: this.selected.lineName,
                    machineName: this.selected.machineName,
                    page: this.searchParams.page,
                    limit: this.searchParams.limit,
                    startTime: this.searchParams.startTime,
                    endTime: this.searchParams.endTime,
                })
                if (res.status == 200) {
                    this.eventLogData = res.data
                } else {
                    this.$message({
                        message: '获取Eventlog错误',
                        type: 'error'
                    });
                }
            } catch (error) {
                console.log(error);
            }
        },
        formatLineMachineData(data) {
            return data.map(line => ({
                label: line.lineName,
                value: line.lineName,//line.lineId,
                children: line.machines.map(machine => ({
                    label: machine.machineName,
                    value: machine.machineName //machine.machineId
                }))
            }));
        },
        async visibleChange(visible) {
            if (visible) {
                if (!this.options || this.options.length === 0) {
                    await this.getLineMachineData();
                }
            }
        },
        handleChange(value) {
            const [lineName, machineName] = value;

            this.selected = {
                lineName: lineName,
                machineName: machineName
            };

        },
    }
};
</script>

<style scoped>
.container {
    /* padding: 20px; */
    border-radius: 10px;
    width: 100%;
    /* max-width: 1200px; */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    box-sizing: border-box;
}

.charts-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    /* 将排列方向改为纵向 */
    justify-content: space-between;
    /* 上下间隔平均分配 */
}

.header {
    font-size: 24px;
    color: black;
    text-align: center;
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.header-content {
    display: flex;
    /* 使内容也使用 Flexbox */
    align-items: center;
    /* 垂直居中 */
}

.content-wrapper {
    width: 100%;
}

.content-block1 {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.content-block {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
}

p {
    font-size: 16px;
    /* margin-bottom: 5px; */
}

.chart {
    height: 150px;
    /* 330px*/
    /* width: 200px; */
}

.chart1 {
    height: 300px;
}

.chart.utilize-chart {
    height: 263px;

}

.horizontal-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    /* 元素靠左对齐 */
    align-items: center;
    /* 垂直居中对齐 */
}

.cascader-label-right {
    color: orangered;
    position: absolute;
    right: .6em;
}

.disable-util-container {
    width: 100%;
}

::v-deep .disable-util-container .el-slider__runway.disabled .el-slider__bar {
    background-color: #82b8ef;
}

.disable-util-check {
    text-align: right;
    width: 100%;
    margin-top: 15px;
}

.date-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

.date-container span {
    font-size: 14px;
    color: #909399;
}
</style>
